<template>
  <div class="home">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item.id" :title="item.title">
        <div style="height: 200px; border: 1px solid #000"></div>
      </van-cell>
    </van-list>
    <!-- <MyLoading></MyLoading> -->
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import homeMinxin from '../minxins'
export default {
  name: 'HomeView',
  components: {},
  data() {
    return {
      opt: {
        page: 0,
        size: 10,
      },
      loading: false, // 控制数据滑动动底部显示
      finished: false, // 控制数据边界，数据都请求完毕之后，不让用户再滑动了
    }
  },
  // mixins: [homeMinxin],
  computed: {
    ...mapState(['list', 'total']),
  },
  created() {
    // console.log('home-created', this)
    // this.fetchList()
  },
  mounted() {
    // console.log('home-mounted', this)
  },
  methods: {
    ...mapActions(['fetchList']),
    onLoad() {
      this.opt.page++
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // setTimeout(() => {
      // 加载状态结束 数据请求结束

      this.fetchList(this.opt).then((res) => {
        // console.log('res:', res)
        // 拿到数据结束请求
        this.loading = false
        // 每次拿到数据，对比是否请求完毕 数据全部加载完成
        if (this.list.length >= this.total) {
          this.finished = true
        }
      })
      // }, 1000)
    },
  },
}
</script>
<style>
.home {
}
</style>
